var menu = [
    {
        'id':1,
        'fMenuName':'农药中毒报告',
        'childMenu':[
            { 'id':11, 'sMenuName':'我的申请', 'link':'pesticide-poisoning-report/application.html' },
            { 'id':12, 'sMenuName':'待审核', 'link':'pesticide-poisoning-report/check-pending.html' },
            { 'id':13, 'sMenuName':'已审核', 'link':'pesticide-poisoning-report/checked.html' }
        ]
    },
    {
        'id':2,
        'fMenuName':'脑卒中和心肌梗死病例报告',
        'childMenu':[
            { 'id':21, 'sMenuName':'我的申请', 'link':'stock-MI-report/application.html' },
            { 'id':22, 'sMenuName':'待审核', 'link':'stock-MI-report/check-pending.html' },
            { 'id':23, 'sMenuName':'已审核', 'link':'stock-MI-report/checked.html' }
        ]
    },
    {
        'id':3,
        'fMenuName':'肿瘤病例报告',
        'childMenu':[
            { 'id':31, 'sMenuName':'我的申请', 'link':'tumor-medical-report/application.html' },
            { 'id':32, 'sMenuName':'待审核', 'link':'tumor-medical-report/check-pending.html' },
            { 'id':33, 'sMenuName':'已审核', 'link':'tumor-medical-report/checked.html' }
        ]
    },
    {
        'id':4,
        'fMenuName':'中华人民共和国传染病报告',
        'childMenu':[
            { 'id':41, 'sMenuName':'我的申请', 'link':'contagion-report/application.html' },
            { 'id':42, 'sMenuName':'待审核', 'link':'contagion-report/check-pending.html' },
            { 'id':43, 'sMenuName':'已审核', 'link':'contagion-report/checked.html' }
        ]
    },
    {
        'id':5,
        'fMenuName':'医院感染病例登记',
        'childMenu':[
            { 'id':51, 'sMenuName':'我的申请', 'link':'infection-report/application.html' },
            { 'id':52, 'sMenuName':'待审核', 'link':'infection-report/check-pending.html' },
            { 'id':53, 'sMenuName':'已审核', 'link':'infection-report/checked.html' }
        ]
    },
    {
        'id':6,
        'fMenuName':'居民心脑血管报告',
        'childMenu':[
            { 'id':61, 'sMenuName':'我的申请', 'link':'cardiovascular-report/application.html' },
            { 'id':62, 'sMenuName':'待审核', 'link':'cardiovascular-report/check-pending.html' },
            { 'id':63, 'sMenuName':'已审核', 'link':'cardiovascular-report/checked.html' }
        ]
    },
    {
        'id':7,
        'fMenuName':'死亡病例报告',
        'childMenu':[
            { 'id':71, 'sMenuName':'我的申请', 'link':'deaths-report/application.html' },
            { 'id':72, 'sMenuName':'待审核', 'link':'deaths-report/check-pending.html' },
            { 'id':73, 'sMenuName':'已审核', 'link':'deaths-report/checked.html' }
        ]
    },
    {
        'id':8,
        'fMenuName':'武汉市高温中暑报告',
        'childMenu':[
            { 'id':81, 'sMenuName':'我的申请', 'link':'heat-exhaustion-report/application.html' },
            { 'id':82, 'sMenuName':'待审核', 'link':'heat-exhaustion-report/check-pending.html' },
            { 'id':83, 'sMenuName':'已审核', 'link':'heat-exhaustion-report/checked.html' }
        ]
    },
    {
        'id':9,
        'fMenuName':'食源性疾病病例监测',
        'childMenu':[
            { 'id':91, 'sMenuName':'我的申请', 'link':'foodborne-illness-report/application.html' },
            { 'id':92, 'sMenuName':'待审核', 'link':'foodborne-illness-report/check-pending.html' },
            { 'id':93, 'sMenuName':'已审核', 'link':'foodborne-illness-report/checked.html' }
        ]
    },
    {
        'id':10,
        'fMenuName':'系统管理',
        //'childMenu':[
        //    { 'id':101, 'sMenuName':'用户管理', 'link':'system-management/user-management.html' },
        //    { 'id':102, 'sMenuName':'菜单管理', 'link':'system-management/menu-management.html' }
        //]
    }
];

var template = '<ul class="menu-tree">' +
                    '<li class="first-menu-li" v-for="item in menuData">' +
                        '<label class="clearfix" :for="item.id">' +
                            '<input type="checkbox" class="first-menu-checkbox" name="firstCheckBox" :value="item.id" :id="item.id" @change="toggleShowSecondMenu($event,item)"/>' +
                            '<div class="action-area">' +
                                '<img src="arrow.png" class="arrow" v-if="item.childMenu != undefined">' +
                                '<span>{{ item.fMenuName }}</span>' +
                            '</div>' +
                        '</label>' +
                        '<ul class="second-menu" style="display: none;">' +
                            '<li class="second-menu-li" v-for="secondItem in item.childMenu">' +
                                '<label :for="secondItem.id">' +
                                    '<input type="checkbox" name="secondCheckBox" :value="secondItem.id" :id="secondItem.id" @change="setSecondChecked($event,secondItem)"/>' +
                                    '<span>{{ secondItem.sMenuName }}</span>' +
                                '</label>' +
                            '</li>' +
                        '</ul>' +
                    '</li>' +
                '</ul>';

Vue.component('menu-tree',{
    props:{
        menudata:Array
    },
    template: template,
    data:function(){
        return{
            vals:[],
            childVals:[],
            menuData:this.menudata
        }
    },
    methods:{
        toggleShowSecondMenu:function(e,item){   //控制二级菜单是否显示隐藏，同时获得选中的一级菜单的id
            var currentCheckbox = e.target;
            var secondMenuUl = $(currentCheckbox).parentsUntil('.menu-tree').find(".second-menu");  //找到当前点击元素所属的父级中的二级菜单ul
            var arrow = $(currentCheckbox).parentsUntil('.menu-tree').find(".arrow");
            if(currentCheckbox.checked == true) {
                secondMenuUl.css("display", "block");
                arrow.addClass("arrow-rotate");
                this.vals.push(item.id);
                secondMenuUl.find("input[name=secondCheckBox]").attr("checked", "checked");
                for (var i = 0; i < item.childMenu.length; i++) {
                    this.childVals.push(item.childMenu[i].id);
                }
            }else{
                secondMenuUl.css("display","none");
                arrow.removeClass("arrow-rotate");
                this.vals.splice(this.vals.indexOf(item.id),1);
                secondMenuUl.find("input[name=secondCheckBox]").attr("checked", false);
                for (var i = 0; i < item.childMenu.length; i++) {
                    if(this.childVals.indexOf(item.childMenu[i].id) != -1){
                        this.childVals.splice(this.childVals.indexOf(item.childMenu[i].id),1);
                    }
                }
            }
            this.$emit('setoption',this.vals,this.childVals);
        },
        setSecondChecked:function(e,secondItem){  //二级菜单中的选中事件
            var currentSecondCheckbox = e.target;
            if(currentSecondCheckbox.checked == true){
                this.childVals.push(secondItem.id);
            }else{
                this.childVals.splice(this.childVals.indexOf(secondItem.id),1);
            }
            this.$emit('setoption',this.vals,this.childVals);
        }
    }
});

var demo = new Vue({
    el:'#demo',
    data:{
        menuData:menu,
        chooseMenu:[],
        chooseSecondMenu:[]
    },
    methods:{
        getMenuChecked:function(vals,childVals){
            this.chooseMenu = vals;
            this.chooseSecondMenu = childVals;
            console.log('一级菜单',vals);
            console.log('二级菜单',childVals)
        }
    }
});
